<style>
    div {
        max-width: 300px;
        /* height: 100px; */
        border: 1px solid red;
        padding: 10px;
        margin-top: 5px;
    }
</style>

<body>
    <div id="a">
        a
    </div>

    <br/>
    <button onclick="add()">新增节点</button>
    <button onclick="remove()">删除节点</button>

    <pre>
好像就几个api就差不多了？
createTextNode
createElement
appendChild
removeChild
setAttribute
    </pre>
</body>



<script>
    let parent = document.getElementById("a")
    function add() {
        let b = document.createElement("div")
        parent.appendChild(b)
        b.innerHTML = Math.random()
        b.setAttribute("id", "b")
    }

    function remove() {
        let b = document.getElementById("b")
        parent.removeChild(b)
    }
</script>
